---
title: "Divider"
description: "Divider is a component that separates content in a page."
---

import {dividerContent} from "@/content/components/divider";

# Divider

Divider is a component that separates content in a page.

<ComponentLinks component="divider" reactAriaHook="useSeparator" rscCompatible />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add divider",
    npm: "npm install @heroui/divider",
    yarn: "yarn add @heroui/divider",
    pnpm: "pnpm add @heroui/divider",
    bun: "bun add @heroui/divider"
  }}
/>


## Import

<ImportTabs
  commands={{
    main: 'import {Divider} from "@heroui/react";',
    individual: 'import {Divider} from "@heroui/divider";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={dividerContent.usage} />

<Spacer y={4}/>  

## Data Attributes

`Divider` has the following attributes on the `base` element:

- **data-orientation**:
  The orientation of the divider. Based on `orientation` prop.

<Spacer y={4}/>  

## Accessibility

- Separator role is added to the divider.
- Support for horizontal and vertical orientation.
- Support for HTML `<hr>` element or a custom element type.

<Spacer y={4}/>  

## API

### Divider Props

<APITable
  data={[
    {
      attribute: "orientation",
      type: "`horizontal` | `vertical`",
      description: "The orientation of the divider.",
      default: "`horizontal`"
    }
  ]}
/>
